<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="">
		<meta name="description" content="">
		<title>首页</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/lanrenzhijia.css" />
		<link rel="stylesheet" href="css/font-awesome.css" />
	</head>
	<body>
		<div class="header">
			<div class="header-bd">
				<div class="nav">
					<span class="fa fa-bars" aria-hidden="true"></span>
					导航
					<span class="fa fa-caret-down" aria-hidden="true"></span>
				</div>
				<div class="nav-list">
					<div>
						<label>电影</label>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
					</div>
					<div>
						<label>电视剧</label>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
					</div>
					<div>
						<label>动漫</label>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
					</div>
				</div>
				<div class="logo"><img src="img/logo.png" alt="" /></div>
				<div class="search">
					<div class="top">
						<div class="input-search">
							<input type="text" name="" id="" value="" />
							<a href="#"><img src="img/search.png" alt="" /></a>
						</div>
						<div class="ranking">
							<a href="#"><img src="img/ranking.png" alt="" /></a>
						</div>
					</div>
					<ul>
						<li><a href="#">权利的游戏</a></li>
						<li><a href="#">纸牌屋</a></li>
						<li><a href="#">斯巴达克斯</a></li>
						<li><a href="#">太阳的后羿</a></li>
						<li><a href="#">欢乐颂</a></li>
					</ul>
				</div>
				<div class="sign">
					<a href="#">登录</a>
					<a href="#">注册</a>
				</div>
			</div>			
		</div>
		<div class="bignav">
			<div class="bood">
				<div class="listx">
					<a href="#" class="a-tltle">电影</a>
					<ul>
						<li><a href="#">惊悚</a></li>
						<li><a href="#">惊悚</a></li>
						<li><a href="#">惊悚</a></li>
						<li><a href="#">惊悚</a></li>
						<li><a href="#">惊悚</a></li>
						<li><a href="#">惊悚</a></li>
						<li><a href="#">惊悚</a></li>
						<li><a href="#">惊悚</a></li>
					</ul>
				</div>
				<div class="listx">
					<a href="#" class="a-tltle">电视剧</a>
					<ul>
						<li><a href="#">惊悚</a></li>
						<li><a href="#">惊悚</a></li>
						<li><a href="#">惊悚</a></li>
						<li><a href="#">惊悚</a></li>
						<li><a href="#">惊悚</a></li>
						<li><a href="#">惊悚</a></li>
						<li><a href="#">惊悚</a></li>
						<li><a href="#">惊悚</a></li>
					</ul>
				</div>
				<div class="listx">
					<a href="#" class="a-tltle">动漫</a>
					<ul>
						<li class="lix"><a href="#">惊悚</a></li>
						<li class="lix"><a href="#">惊悚</a></li>
						<li class="lix"><a href="#">惊悚</a></li>
						<li class="lix"><a href="#">惊悚</a></li>
						<li class="lix"><a href="#">惊悚</a></li>
						<li class="lix"><a href="#">惊悚</a></li>
					</ul>
				</div>
			</div>			
		</div>
		<!--banner-->
		<div class="banner">				
			<div class="pic">
				<div class="slider">
					<div class="bd">
					    <ul>
					        <li><a target="_blank" href="http://sc.chinaz.com"><img src="img/1.jpg" /></a></li>
					        <li><a target="_blank" href="http://sc.chinaz.com"><img src="img/2.jpg" /></a></li>
					        <li><a target="_blank" href="http://sc.chinaz.com"><img src="img/3.jpg" /></a></li>
					        <li><a target="_blank" href="http://sc.chinaz.com"><img src="img/4.jpg" /></a></li>
					    </ul>
					</div>
					<div class="pnBtn prev"> <span class="blackBg"></span> <span class="arrow"></span> </div>
					<div class="pnBtn next"> <span class="blackBg"></span> <span class="arrow"></span> </div>
				</div>
			</div>
		</div>
		<!--content-->
		<div class="all-bd">						
			<!--猜你喜欢-->
			<div class="enjoy">
				<ul class="title-style">
					<li class="li-enjoy">影迷力荐</li>
					<li>猜你喜欢</li>
				</ul>
			    <ul class="film-list">
			    	<a href="#">
			    		<li>
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li>
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li>
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li>
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li class="li-none">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    </ul>
			</div>
			<!--激情预告-->
			<div class="enjoy">
				<p class="big-style">激情预告</p>
				<div class="big-introduce">
					<img src="img/film.jpg" alt="" />
					<p class="b-title">画皮简介简介简介</p>
				    <p class="b-word">简介简介简介</p>
				</div>
				<ul class="film-list film-list-four">
			    	<a href="#">
			    		<li class="li-bottom">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li class="li-bottom">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li class="li-bottom li-none">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li class="li-bottom">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li>
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li class="li-none">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    </ul>
			</div>
			<!--广告-->
			<div class="advier"></div>
			<div class="enjoy">
				<p class="big-style">卫视同步</p>
				<div class="big-introduce">
					<img src="img/film.jpg" alt="" />
					<p class="b-title">画皮简介简介简介</p>
				    <p class="b-word">简介简介简介</p>
				</div>
				<ul class="film-list film-list-three">
			    	<a href="#">
			    		<li class="li-bottom">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li class="li-bottom">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>			    	
			    	<a href="#">
			    		<li class="li-bottom">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li>
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	
			    </ul>
			    <div class="paiming">
			    	<ul class="title-lei">
						<li class="li-choose">电视剧榜</li>
						<li>影友推荐</li>
					</ul>
			    	<ul>
			    		<a href="#">
			    			<li class="lione">
				    			<img src="img/film.jpg" alt="" />
				    			<span class="number">1</span>
				    		</li>
			    		</a>
			    		<a href="#">
				    		<li>
				    			<span>2</span>
				    			<span class="callname">花千骨</span>
				    			<img src="img/up.png" alt="" />
				    		</li>
				    	</a>
			    		<a href="#">
				    		<li>
				    			<span>3</span>
				    			<span class="callname">花千骨</span>
				    			<img src="img/up.png" alt="" />
				    		</li>
				    	</a>
				    	<a href="#">
				    		<li>
				    			<span>4</span>
				    			<span class="callname">花千骨</span>
				    			<img src="img/up.png" alt="" />
				    		</li>
				    	</a>
				    	<a href="#">
				    		<li>
				    			<span>5</span>
				    			<span class="callname">花千骨</span>
				    			<img src="img/down.png" alt="" />
				    		</li>
				    	</a>
			    	</ul>
			    	<a href="#">
			    	    <div class="guanggao">
			    	    </div>
			    	</a>			    	
			    </div>
			</div>
			<!--日韩热播-->
			<div class="enjoy">
				<p class="big-style">日韩热播</p>
				<div class="big-introduce">
					<img src="img/film.jpg" alt="" />
					<p class="b-title">画皮简介简介简介</p>
				    <p class="b-word">简介简介简介</p>
				</div>
				<ul class="film-list film-list-four">
			    	<a href="#">
			    		<li class="li-bottom">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li class="li-bottom">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li class="li-bottom li-none">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li class="li-bottom">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li>
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li class=" li-none">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    </ul>
			</div>
			<!--美剧精选-->
			<div class="enjoy">
				<p class="big-style">美剧精选</p>
			    <ul class="film-list">
			    	<a href="#">
			    		<li>
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li>
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li>
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li>
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li class="li-none">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    </ul>
			</div>
			<div class="advier"></div>
			<!--佳品有约-->
			<div class="enjoy">
				<p class="big-style">佳品有约</p>				
				<ul class="only">
					<a href="#">
						<li class="li-big">
							<div class="big-introduce">
								<img src="img/film.jpg" alt="" />
								<p class="b-title">画皮简介简介简介</p>
							    <p class="b-word">简介简介简介</p>				    
							</div>
						</li>
					</a>						
					<a href="#">
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>	
					<a href="#">
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>	
						<li class="li-zero">
						    <div class="paiming">
						    	<ul class="title-lei">
									<li class="li-choose">电视剧榜</li>
									<li>影友推荐</li>
								</ul>
						    	<ul>
						    		<a href="#">
						    			<li class="lione">
							    			<img src="img/film.jpg" alt="" />
							    			<span class="number">1</span>
							    		</li>
						    		</a>
						    		<a href="#">
							    		<li>
							    			<span>2</span>
							    			<span class="callname">花千骨</span>
							    			<img src="img/up.png" alt="" />
							    		</li>
							    	</a>
						    		<a href="#">
							    		<li>
							    			<span>3</span>
							    			<span class="callname">花千骨</span>
							    			<img src="img/up.png" alt="" />
							    		</li>
							    	</a>
							    	<a href="#">
							    		<li>
							    			<span>4</span>
							    			<span class="callname">花千骨</span>
							    			<img src="img/up.png" alt="" />
							    		</li>
							    	</a>
							    	<a href="#">
							    		<li>
							    			<span>5</span>
							    			<span class="callname">花千骨</span>
							    			<img src="img/down.png" alt="" />
							    		</li>
							    	</a>
						    	</ul>
						    	<a href="#">
						    	    <div class="guanggao">
						    	    </div>
						    	</a>					    	
						    </div>
						</li>	
					<a href="#">
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>	
					<a href="#">
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>	
					<a href="#">	
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>	
					<a href="#">
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>						
					<a href="#">
						<li class="li-none">
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>	
				</ul>
			</div>
			<!--院线大片-->
			<div class="enjoy">
				<p class="big-style">院线大片</p>
				<div class="btn-left">
					<img src="img/left.png" alt="" />
				</div>
				<div class="only-out">
					<ul class="only only-scroll">
						<a href="#">
							<li>
								<img src="img/film.jpg" alt="" />
							    <p class="c-title">画皮简介简介简介</p>
						        <p class="c-word">简介简介简介</p>
						        <span class="bj">独播</span>
							</li>
						</a>
						<a href="#">
							<li>
								<img src="img/film.jpg" alt="" />
							    <p class="c-title">画皮简介简介简介</p>
						        <p class="c-word">简介简介简介</p>
						        <span class="bj">独播</span>
							</li>
						</a>
						<a href="#">
							<li>
								<img src="img/film.jpg" alt="" />
							    <p class="c-title">画皮简介简介简介</p>
						        <p class="c-word">简介简介简介</p>
						        <span class="bj">独播</span>
							</li>
						</a>
						<a href="#">
							<li>
								<img src="img/film.jpg" alt="" />
							    <p class="c-title">画皮简介简介简介</p>
						        <p class="c-word">简介简介简介</p>
						        <span class="bj">独播</span>
							</li>
						</a>
						<a href="#">
							<li>
								<img src="img/film.jpg" alt="" />
							    <p class="c-title">画皮简介简介简介</p>
						        <p class="c-word">简介简介简介</p>
						        <span class="bj">独播</span>
							</li>
						</a>
						<a href="#">
							<li>
								<img src="img/film.jpg" alt="" />
							    <p class="c-title">画皮简介简介简介</p>
						        <p class="c-word">简介简介简介</p>
						        <span class="bj">独播</span>
							</li>
						</a>
						<a href="#">
							<li>
								<img src="img/film.jpg" alt="" />
							    <p class="c-title">画皮简介简介简介</p>
						        <p class="c-word">简介简介简介</p>
						        <span class="bj">独播</span>
							</li>
						</a>
						<a href="#">
							<li>
								<img src="img/film.jpg" alt="" />
							    <p class="c-title">画皮简介简介简介</p>
						        <p class="c-word">简介简介简介</p>
						        <span class="bj">独播</span>
							</li>
						</a>
						<a href="#">
							<li>
								<img src="img/film.jpg" alt="" />
							    <p class="c-title">画皮简介简介简介</p>
						        <p class="c-word">简介简介简介</p>
						        <span class="bj">独播</span>
							</li>
						</a>
						<a href="#">
							<li>
								<img src="img/film.jpg" alt="" />
							    <p class="c-title">画皮简介简介简介</p>
						        <p class="c-word">简介简介简介</p>
						        <span class="bj">独播</span>
							</li>
						</a>
					</ul>
				</div>
				
				<div class="btn-right">
					<img src="img/right.png" alt="" />
				</div>
			</div>
			<div class="advier"></div>
			<!--动漫剧场-->
			<div class="enjoy">
				<p class="big-style">动漫剧场</p>
				<div class="big-introduce">
					<img src="img/film.jpg" alt="" />
					<p class="b-title">画皮简介简介简介</p>
				    <p class="b-word">简介简介简介</p>
				</div>
				<ul class="film-list film-list-four">
			    	<a href="#">
			    		<li class="li-bottom">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li class="li-bottom li-none">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li class="li-bottom li-none">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>			    	
			    	<a href="#">
			    		<li>
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li>
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>
			    	<a href="#">
			    		<li  class="li-none">
				    		<img src="img/film.jpg" alt="" />
				    		<p class="ptitle">画皮</p>
				    		<p class="pword">简介简介简介</p>
			     	    </li>
			    	</a>			    	
			    </ul>
			</div>
			    <div class="advier"></div>
			<div class="enjoy">
				<p class="big-style">合作伙伴</p>
				<ul class="partner">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>    
		   </div>
		</div>
		
	    <!--footer-->
	    <div class="footer">
	    	<div class="footer-bd">
	    		<ul>
	    			<li><a href="#">公司介绍</a>|</li>
	    			<li><a href="#">新闻动态</a>|</li>
	    			<li><a href="#">联系方式</a>|</li>
	    			<li><a href="#">招聘英才</a>|</li>
	    			<li><a href="#">帮助与反馈</a>|</li>
	    			<li><a href="#">侵权投诉</a>|</li>
	    			<li><a href="#">About Us</a></li>
	    		</ul>
	    		<p class="bq">
	    			Copyright © 2016 All Rights Reserved.
	    		</p>
	    	</div>
	    </div>
	</body>
	<script type="text/javascript" src="js/jquery-2.2.3.min.js" ></script>
    <script type="text/javascript" src="js/jquery.SuperSlide2.js" ></script>
	<script>
		$('document').ready(function(){
			$(document).scroll(function () {
				if($(document).scrollTop()>380){
				   $('.header').addClass('hearder-position');
				   $('.nav').show();
			    }else{
			    	$('.header').removeClass('hearder-position');
			    	$('.nav').hide();
			    	$('.nav-list').hide()
			    }
			})
			$('.nav').click(function(){
				$('.nav-list').toggle();
			});
			$('.jt').hover(function(){
				$('.banner-list').show();
			},function(){
				$('.banner-list').hide();
			});
			//banner页切换
			var allWidth=$(document).width(),
			    oneWidth=$('.slider .bd li img').width()
			    paddingWidth=(allWidth-oneWidth)/2;
			$('.slider').css('paddingLeft',paddingWidth);
			$('.slider').css('paddingRight',paddingWidth);
			$('.slider .tempWrap').css('paddingLeft',paddingWidth);
			$('.slider .tempWrap').css('paddingRight',paddingWidth);
			$('.slider .pnBtn').css('width',paddingWidth);
			//tab切换
			$('.title-style li').click(function(){
				$(this).addClass('li-enjoy').siblings().removeClass('li-enjoy');
			})
			$('.title-lei li').click(function(){
				$(this).addClass('li-choose').siblings().removeClass('li-choose');
			})
			//hover播放
			  $(".film-list li").hover(function(){
			  	$(this).append(" <div class='run'></div>");
			  	$('.run').append('<img src="img/run.png" alt="" />')			    
			  },function(){
			  	$(this).remove(".run");
			  	$('.run').remove();
			  });			  
			  $(".big-introduce").hover(function(){
			  	$(this).append(" <div class='run-big'></div>")	;		    
			    $('.run-big').append('<img src="img/run.png" alt="" />')
			  },function(){
			  	$(this).remove(".run-big");
			  	$('.run-big').remove();
			  });
			  $(".only li").hover(function(){
			  	var oHeight=$(this).children('img').height();
			  	var oWidth=$(this).children('img').width();
			  	if(oHeight==329&&oWidth==230){
			  		if($(this).append(" <div class='run-long'></div>")){
					    $('.run-long').append('<img src="img/run.png" alt="" />')
					}
			  	}					
			  },function(){
			  	if($(this).remove(".run-long")){
			    	$('.run-long').remove();
			    }
			  });
			  //scroll的长度
			  var scrollWidth=242*$('.only-scroll li').length-12;
			  var leftWidth=scrollWidth-1080;
			  $('.only-scroll').width(scrollWidth);
			  //scroll
			  $('.btn-left').hover(function(){
			  	var nowLeft=parseInt($('.only-scroll').css('marginLeft'));
			  	var lastWidth=leftWidth+nowLeft;
			    var timerLeft=lastWidth*10;
			  	$('.only-scroll').animate({marginLeft:-leftWidth},timerLeft,'linear');
			  },function(){
			  	$('.only-scroll').stop();
			  });
			  $('.btn-right').hover(function(){
			  	var nowLeft=parseInt($('.only-scroll').css('marginLeft'));
			    var timerRight=-nowLeft*10;
			  	$('.only-scroll').animate({marginLeft:0},timerRight,'linear');
			  },function(){
			  	$('.only-scroll').stop();
			  });
		});
		/* 把最后一个放到第一个前面，然后通过外层ul{margin-left:-630px !important; }来显示第一个 */
        jQuery(".slider .bd li").first().before( jQuery(".slider .bd li").last() );
        /* 控制左右按钮显示 */
        jQuery(".slider .pnBtn").hover(function(){ jQuery(this).find(".arrow").show() },function(){ jQuery(this).find(".arrow").hide() });
        /* 调用SuperSlide */
        jQuery(".slider").slide({ mainCell:".bd ul", effect:"leftLoop",  autoPlay:true, vis:3, mouseOverStop:false,interTime:5000 });
	</script>
</html>
